<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>Todo-List</title>
	<style type="text/css">
	*{
		margin:0;
		padding:0;
		list-style:none;
		font-size: 0.5rem;
	}
		html,body{
			width: 100%;
		}
		table{
			width:100%;
		}
		img{
			width: 1rem;
		}
		.time,.cz{
			width:2.4rem;
		}
		td,th{
			text-align: center;
			padding: 0.2rem;
		}
		.xh{
			width:1rem;
		}
	</style>
</head>
<body>
	<table border="1" cellspacing="0">
		<tr>
			<th class="xh">Ser</th>
			<th class="time">Date</th>
			<th>Object</th>
			<th>Price</th>
			<th class="cz">Oper</th>
		</tr>
	</table>
	<p>Object:<textarea class="obj" type="" name=""></textarea></p>
	<p>Price:<input class="pri" type="" name=""></p>
	<button class="btn">添加</button>
	<button class="save">保存</button>
	<script type="text/javascript">
	window.onload = function(){
		var windo = document.documentElement.clientWidth || document.body.clientWidth;
		var htmlDom = document.querySelector("html");
		htmlDom.style.fontSize = windo / 20 + 'px';
		window.addEventListener("resize",function(){
			var windo = document.documentElement.clientWidth || document.body.clientWidth;
			htmlDom.style.fontSize = windo / 20 + 'px';
		})
		var obj = document.querySelector(".obj"),
			pri = document.querySelector(".pri"),
			tab = document.querySelector("table"),
			btn = document.querySelector(".btn"),
			date = new Date().toLocaleDateString(),
			a=0;
		btn.onclick = function(){
			a++;
			var tr = document.createElement("tr");
			tr.innerHTML =  '<td>'+a+'</td>'+
							'<td>'+date+'</td>'+
							'<td>'+obj.value+'</td>'+
							'<td>'+pri.value+'</td>'+
							'<td><img src="delete.png" class="del"><img src="xq.png" class="xq"></td>'
			tab.appendChild(tr);
			var _del = document.querySelectorAll(".del");
			for(var i = 0;i<_del.length;i++){
				_del[i].onclick = function(){
					tab.removeChild(this.parentNode.parentNode);
				}
			}
		}
	}
	</script>
</body>
</html>